<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
            integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
            crossorigin="anonymous"></script>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet">
	
	<style>
		.errMsg {
			color: red;
			display: none;
		}
	</style>
    <script>
		var emailValid = false;
		var pwdValid = false;
		var codeValid = false;
		
		function checkBeforeSubmit() {
			validateEmail();
			validatePwd();
			validateCode();
			return emailValid && pwdValid && codeValid;
		}
		
		function checkBeforeGetCode() {
			validateEmail();
			$("#pwd-errMsg").hide();
			$("#code-errMsg").hide();
			return emailValid;
		}
		
		function validateEmail() {
			var email = $("#reg-email").val();
			if (email) {
				$("#email-errMsg").hide();
				emailValid = true;
			} else {
				$("#email-errMsg").show();
				emailValid = false;
			}
		}
		
		function validatePwd() {
			var pwd = $("#reg-password").val();
			
			if (pwd) {
				$("#pwd-errMsg").hide();
				pwdValid  = true;
			} else {
				$("#pwd-errMsg").show();
				pwdValid  = false;
			}
		}
		
		function validateCode() {
			var code = $("#reg-code").val();
			
			if (code) {
				$("#code-errMsg").hide();
				codeValid = true;
			} else {
				$("#code-errMsg").show();
				$("#code-errMsg").css({display: 'block'})
				codeValid = false;
			}
		}
	
	
        $(function () {
            // Handler for .ready() called.
            $("#submitBtn").on("click", function () {
				if (!checkBeforeSubmit()) {
					return;
				}
			
                var email = $("#reg-email").val();
                var password = $("#reg-password").val();
                var code = $("#reg-code").val();
                $.ajax({
                    url: "http://www.test.com/api/user/register/"+email+"/"+password+"/"+code,
                    // url: "http://localhost:9002/api/user/register/"+email+"/"+password+"/"+code,
                    type: "GET",
                    success: function (data) {
                        if(data == 0){
                            alert("注册成功");
							location.href = "login.html";
							// 注册成功之后，user微服务已经将token保存到cookie中，重定向到欢迎页面后，就可以根据token查询到用户邮箱信息并展示
                            //location.href = "welcome.html";
                        }else if(data == 2){
                            alert("注册码已过期，请重新获取");
                        }else{
                            alert("注册失败，重新提交尝试");
                        }
                    },
                    error:function (data) {
                        if(data.status == 403){
                            alert("当前ip注册次数达到上限，禁止注册");
                        }
                    }
                })
            });

            $("#getCodeBtn").on("click", function () {
				if (!checkBeforeGetCode()) {
					return;
				}
			
                var email = $("#reg-email").val();
                $.ajax({
                    url: "http://www.test.com/api/code/create/"+email,
                    // url: "http://localhost:9002/api/code/create/"+email,
                    type: "GET",
                    success: function (data) {
                        if(data){
							var count = 60;
							var obj = setInterval(function() {
								var btn = $("#getCodeBtn");
								if (count > 0) {
									btn.text(count + "秒后可再次获取");
									btn.attr("disabled", true);
									count--;
								} else {
									$("#getCodeBtn").text("获取验证码");
									clearInterval(obj);
									btn.attr("disabled", false);
								}
							}, 1000)
                            alert("请到邮箱查看验证码！");
                        }else{
                            alert("这个邮箱已经注册过了");
                        }
                    }
                    //dataType: "text"
                })
            });
        });
    </script>
    <title>Hello, world!</title>
</head>
<body>
<div class="container">
    <!-- Content here -->
    <form>
        <div class="form-group">
            <label for="reg-email">Email address</label>
            <input type="email" class="form-control" id="reg-email" aria-describedby="emailHelp" oninput ="validateEmail()">
			<span id="email-errMsg" class="errMsg">请输入邮箱</span>
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
            <label for="reg-password">Password</label>
            <input type="password" class="form-control" id="reg-password" oninput="validatePwd()">
			<span id="pwd-errMsg" class="errMsg">请输入密码</span>
        </div>
        <div class="form-group">
            <label for="reg-code">Code</label>
            <input type="text" class="form-control" id="reg-code" oninput="validateCode()">
			<span id="code-errMsg" class="errMsg">请输入验证码</span>
            <button type="button" id="getCodeBtn" class="btn btn-primary">获取验证码</button>
        </div>
        <button type="button" id="submitBtn" class="btn btn-primary">注册</button>
    </form>
</div>

</body>
</html>